<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.TAB.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-tab-group</h3>
        <p>{{'DEMO.TAB.INTRO.0' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>direction</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.TAB.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">free-tab</h3>
        <p>{{'COMPONENT.TAB' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>header</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.TAB.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>disabled</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.TAB.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <h3 class="free-head-title">{{'EVENT' | translate}}</h3>
      <div class="free-demo-row">
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onChange</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.TAB.EVENTS.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-demo-board">
        <div class="free-card-board">
          <h3 class="free-toolbar">Import</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="CODE">
              <free-code lang="typescript">
                import &#123;TabGroupModule&#125; from 'freeng/freeng';
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab [header]="'Demo'">
            <free-tab-group>
              <!--<free-tab *ngFor="let tab of tabs" [header]="tab.title">-->
                <!--{{tab.content}}-->
              <!--</free-tab>-->
              <free-tab header="Tab 1">
                Tab 1 content
              </free-tab>
              <free-tab header="Tab 2">
                Tab 2 content
              </free-tab>
            </free-tab-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-tab-group&gt;
                &lt;free-tab header="Tab 1"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
                &lt;free-tab header="Tab 2"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
              &lt;/free-tab-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Direction</h3>
        <free-tab-group direction="right">
          <free-tab [header]="'Demo'">
            <free-tab-group direction="right">
              <free-tab header="Tab 1">
                Tab 1 content
              </free-tab>
              <free-tab header="Tab 2">
                Tab 2 content
              </free-tab>
            </free-tab-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-tab-group direction="right"&gt;
                &lt;free-tab header="Tab 1"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
                &lt;free-tab header="Tab 2"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
              &lt;/free-tab-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Disabled</h3>
        <free-tab-group direction="right">
          <free-tab [header]="'Demo'">
            <free-tab-group direction="right">
              <free-tab header="Tab 1">
                Tab 2 content
              </free-tab>
              <free-tab header="Tab 2" [disabled]="true">
                Tab 2 content
              </free-tab>
              <free-tab header="Tab 3">
                Tab 3 content
              </free-tab>
            </free-tab-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-tab-group direction="right"&gt;
                &lt;free-tab header="Tab 1"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
                &lt;free-tab header="Tab 2" [disabled]="true"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
                &lt;free-tab header="Tab 3"&gt;
                  Tab 3 content
                &lt;/free-tab&gt;
              &lt;/free-tab-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">onChange</h3>
        <free-tab-group direction="right">
          <free-tab [header]="'Demo'">
            <p style="width: 100%;margin-bottom: 10px">
              当前tab：{{activeState?.activeIndex}}
            </p>
            <free-tab-group (onChange)="onTabChange($event)">
              <free-tab header="Tab 1">
                Tab 2 content
              </free-tab>
              <free-tab header="Tab 2">
                Tab 2 content
              </free-tab>
            </free-tab-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-tab-group (onChange)="onTabChange($event)"&gt;
                &lt;free-tab header="Tab 1"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
                &lt;free-tab header="Tab 2"&gt;
                  Tab 2 content
                &lt;/free-tab&gt;
              &lt;/free-tab-group&gt;
            </free-code>
            <h5>Javascript</h5>
            <free-code lang="javascript">
              onTabChange(event: any) &#123;
                this.activeState = &#123;
                  activeIndex: event.activeIndex
                &#125;
              &#125;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Direction</h3>
        <free-tab-group direction="right">
          <free-tab [header]="'Demo'">
            <free-tab-group direction="right">
              <free-tab header="Tab 1" [maxHeight]="200">
                FreeNG is a UI framework based on Angular, provides a lot of powerful re-combination of UI components. The threshold is very low, used to use.
                FreeNG is still very young, the first version was released in May 2017.
                Current Version： v0.2.3
                Special statement: Free name Free, FreeNG is completely open source free!
                FreeNG is a UI framework based on Angular, provides a lot of powerful re-combination of UI components. The threshold is very low, used to use.
                FreeNG is still very young, the first version was released in May 2017.
                Current Version： v0.2.3
                Special statement: Free name Free, FreeNG is completely open source free!
              </free-tab>
              <free-tab header="Tab 2">
                Tab 2 content
              </free-tab>
            </free-tab-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-tab-group direction="right"&gt;
              &lt;free-tab header="Tab 1"&gt;
              Tab 2 content
              &lt;/free-tab&gt;
              &lt;free-tab header="Tab 2"&gt;
              Tab 2 content
              &lt;/free-tab&gt;
              &lt;/free-tab-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Direction</h3>
        <free-tab-group [direction]="'right'">
          <free-tab [header]="'Demo'">
            <free-tab-group [vertical]="true">
              <free-tab header="Tab 1">
                FreeNG is a UI framework based on Angular, provides a lot of powerful re-combination of UI components. The threshold is very low, used to use.
                FreeNG is still very young, the first version was released in May 2017.
                Current Version： v0.2.3
                Special statement: Free name Free, FreeNG is completely open source free!
                FreeNG is a UI framework based on Angular, provides a lot of powerful re-combination of UI components. The threshold is very low, used to use.
                FreeNG is still very young, the first version was released in May 2017.
                Current Version： v0.2.3
                Special statement: Free name Free, FreeNG is completely open source free!
              </free-tab>
              <free-tab header="Tab 2">
                Tab 2 content
              </free-tab>
            </free-tab-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-tab-group direction="right"&gt;
              &lt;free-tab header="Tab 1"&gt;
              Tab 2 content
              &lt;/free-tab&gt;
              &lt;free-tab header="Tab 2"&gt;
              Tab 2 content
              &lt;/free-tab&gt;
              &lt;/free-tab-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Template</h3>
        <free-tab-group [direction]="'right'">
          <free-tab [header]="'Demo'">
            <free-tab-group>
              <free-tab>
                <ng-template [fTemplate]="'header'">
                  123
                </ng-template>
                FreeNG is a UI framework based on Angular, provides a lot of powerful re-combination of UI components. The threshold is very low, used to use.
                FreeNG is still very young, the first version was released in May 2017.
                Current Version： v0.2.3
                Special statement: Free name Free, FreeNG is completely open source free!
                FreeNG is a UI framework based on Angular, provides a lot of powerful re-combination of UI components. The threshold is very low, used to use.
                FreeNG is still very young, the first version was released in May 2017.
                Current Version： v0.2.3
                Special statement: Free name Free, FreeNG is completely open source free!
              </free-tab>
              <free-tab header="Tab 2">
                Tab 2 content
              </free-tab>
            </free-tab-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-tab-group direction="right"&gt;
              &lt;free-tab header="Tab 1"&gt;
              Tab 2 content
              &lt;/free-tab&gt;
              &lt;free-tab header="Tab 2"&gt;
              Tab 2 content
              &lt;/free-tab&gt;
              &lt;/free-tab-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>

  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
